<html>
<head>
<script src="/socket.io/socket.io.js"></script>
<script type="text/javascript" src="javascripts/mutation-summary.js"></script>
<script type="text/javascript" src="javascripts/content_script.js"></script>
<script type="text/javascript" src="javascripts/tree_mirror.js"></script>
</head>
<body>
<h1>This space for rentThis space for rentThis space for rentThis space for rentThis space for rentThis space for rentThis space for rentThis space for rentThis space for rentThis space for rentThis space for rentThis space for rentThis space for rentThis space for rentThis space for rentThis space for rentThis space for rentThis space for rentThis space for rentThis space for rentThis space for rentThis space for rentThis space for rent</h1>
<h2>sdfsdfsfd</h2>
<h2><a href="http://www.baidu.com">baidu</a></h2>

</body>
</html>
<!-- <!DOCTYPE html>
<html lang="en">

<head>
<script src="/socket.io/socket.io.js"></script>
<script type="text/javascript" src="javascripts/mutation-summary.js"></script>
<script type="text/javascript" src="javascripts/content_script.js"></script>
<script type="text/javascript" src="javascripts/tree_mirror.js"></script>
  <base href="http://wiki.jikexueyuan.com">
  <meta http-equiv=Content-Type content="text/html;charset=utf-8">
  <meta http-equiv="Content-Language" content="zh-cn" />
  <meta content=always name=referrer>
            <meta name="keywords" content="响应式交互,Material Design 中文版,Android教程">
      
            <meta name="description" content="响应式交互能让用户信任，并且吸引他们。当用户操作一个美观且符合常理的应用时，他们会感到满意甚至很高兴。那是一种经过深思熟...">
      
      <title>响应式交互 - Material Design 中文版 - 极客学院Wiki</title>
  
  <link rel="stylesheet" type="text/css" href="http://sp1.jikexueyuan.com/static/css/register.css">
  <link rel="shortcut icon" href="/assets/favicon.ico" type="image/x-icon" />
  <link rel="stylesheet" type="text/css" href="/assets/wiki2.1/css/bootstrap.min.css">
  <link rel="stylesheet" type="text/css" href="/assets/wiki2.1/css/detail.min.css">
  <link rel="stylesheet" type="text/css" href="/assets/wiki2.1/css/markdownbody.min.css">
</head>

<body>
<header class="detail-headfix">
  <nav class="w-1200 clearfix">
    <a href="http://www.jikexueyuan.com" class="head-logo" target="_blank">
      <h2>
        <img src="http://e.jikexueyuan.com/headerandfooter/images/logo.png" class="jklogo" alt="极客学院">
      </h2>
    </a>
    <ul class="head-catalog">
      <li class="head-catalog-list">
        <a href="http://wiki.jikexueyuan.com">Wiki</a>
      </li>
      <li class="head-catalog-list">
        <a href="http://wiki.jikexueyuan.com/list/mobile">移动开发</a>
      </li>
      <li class="head-catalog-list">
        <a href="http://wiki.jikexueyuan.com/list/android">Android</a>
      </li>
      <li class="head-catalog-list">
        <a href="http://wiki.jikexueyuan.com/project/material-design">Material Design 中文版</a>
      </li>
    </ul>
    <div class="head-loginbox" id="header-loginbox">
    </div>
  </nav>
</header>

<div class="detail-wrapper w-1200  clearfix">
  <div class="detail-left">
    <ul class="detail-nav">
      <li class="detail-navlist navlist-one ">
        <div class="detail-navlist-title"><a href="http://wiki.jikexueyuan.com/project/material-design/" >关于</a></div>
      </li>
      <li class="detail-navlist navlist-one ">
      <div class="detail-navlist-title"><a href="#" >Material Design</a>
        <div class="navlist-more more-one nav-down "></div>       </div>
              <ul class="navul-one ">
                      <li class="detail-navlist ">
              <div class="detail-navlist-title title-two "><a href="http://wiki.jikexueyuan.com/project/material-design/material-design-intro/introduction.html" >概述</a>
                              </div>
                          </li>
                  </ul>
          </li>
      <li class="detail-navlist navlist-one ">
      <div class="detail-navlist-title"><a href="#" >什么是 Material</a>
        <div class="navlist-more more-one nav-down "></div>       </div>
              <ul class="navul-one ">
                      <li class="detail-navlist ">
              <div class="detail-navlist-title title-two "><a href="http://wiki.jikexueyuan.com/project/material-design/whatis-material-design/environment.html" >环境</a>
                              </div>
                          </li>
                      <li class="detail-navlist ">
              <div class="detail-navlist-title title-two "><a href="http://wiki.jikexueyuan.com/project/material-design/whatis-material-design/material-properties.html" >Material 属性</a>
                              </div>
                          </li>
                      <li class="detail-navlist ">
              <div class="detail-navlist-title title-two "><a href="http://wiki.jikexueyuan.com/project/material-design/whatis-material-design/elevation-shadows.html" >高度和阴影</a>
                              </div>
                          </li>
                  </ul>
          </li>
      <li class="detail-navlist navlist-one ">
      <div class="detail-navlist-title"><a href="#" >动画</a>
        <div class="navlist-more more-one nav-down "></div>       </div>
              <ul class="navul-one ">
                      <li class="detail-navlist ">
              <div class="detail-navlist-title title-two "><a href="http://wiki.jikexueyuan.com/project/material-design/animation/authentic-motion.html" >真实的动作</a>
                              </div>
                          </li>
                      <li class="detail-navlist  navlist-active ">
              <div class="detail-navlist-title title-two "><a href="http://wiki.jikexueyuan.com/project/material-design/animation/responsive-interaction.html" >响应式交互</a>
                              </div>
                          </li>
                      <li class="detail-navlist ">
              <div class="detail-navlist-title title-two "><a href="http://wiki.jikexueyuan.com/project/material-design/animation/meaningful-transitions.html" >有意义的转场动画</a>
                              </div>
                          </li>
                      <li class="detail-navlist ">
              <div class="detail-navlist-title title-two "><a href="http://wiki.jikexueyuan.com/project/material-design/animation/delightful-details.html" >打动用户的细节</a>
                              </div>
                          </li>
                  </ul>
          </li>
      <li class="detail-navlist navlist-one ">
      <div class="detail-navlist-title"><a href="#" >样式</a>
        <div class="navlist-more more-one nav-down "></div>       </div>
              <ul class="navul-one ">
                      <li class="detail-navlist ">
              <div class="detail-navlist-title title-two "><a href="http://wiki.jikexueyuan.com/project/material-design/style/color.html" >色彩</a>
                              </div>
                          </li>
                      <li class="detail-navlist ">
              <div class="detail-navlist-title title-two "><a href="http://wiki.jikexueyuan.com/project/material-design/style/typography.html" >字体排版</a>
                              </div>
                          </li>
                      <li class="detail-navlist ">
              <div class="detail-navlist-title title-two "><a href="http://wiki.jikexueyuan.com/project/material-design/style/icons.html" >图标</a>
                              </div>
                          </li>
                      <li class="detail-navlist ">
              <div class="detail-navlist-title title-two "><a href="http://wiki.jikexueyuan.com/project/material-design/style/imagery.html" >图像</a>
                              </div>
                          </li>
                      <li class="detail-navlist ">
              <div class="detail-navlist-title title-two "><a href="http://wiki.jikexueyuan.com/project/material-design/style/writing.html" >书写</a>
                              </div>
                          </li>
                  </ul>
          </li>
      <li class="detail-navlist navlist-one ">
      <div class="detail-navlist-title"><a href="#" >布局</a>
        <div class="navlist-more more-one nav-down "></div>       </div>
              <ul class="navul-one ">
                      <li class="detail-navlist ">
              <div class="detail-navlist-title title-two "><a href="http://wiki.jikexueyuan.com/project/material-design/layout/layout-principles.html" >准则</a>
                              </div>
                          </li>
                      <li class="detail-navlist ">
              <div class="detail-navlist-title title-two "><a href="http://wiki.jikexueyuan.com/project/material-design/layout/units-measurements.html" >单位和度量</a>
                              </div>
                          </li>
                      <li class="detail-navlist ">
              <div class="detail-navlist-title title-two "><a href="http://wiki.jikexueyuan.com/project/material-design/layout/metrics-and-keylines.html" >度量与边框</a>
                              </div>
                          </li>
                      <li class="detail-navlist ">
              <div class="detail-navlist-title title-two "><a href="http://wiki.jikexueyuan.com/project/material-design/layout/structure.html" >结构</a>
                              </div>
                          </li>
                      <li class="detail-navlist ">
              <div class="detail-navlist-title title-two "><a href="http://wiki.jikexueyuan.com/project/material-design/layout/adaptive-ui.html" >自适应 UI</a>
                              </div>
                          </li>
                  </ul>
          </li>
      <li class="detail-navlist navlist-one ">
      <div class="detail-navlist-title"><a href="#" >组件</a>
        <div class="navlist-more more-one nav-down "></div>       </div>
              <ul class="navul-one ">
                      <li class="detail-navlist ">
              <div class="detail-navlist-title title-two "><a href="http://wiki.jikexueyuan.com/project/material-design/components/bottom-sheets.html" >底部动作条</a>
                              </div>
                          </li>
                      <li class="detail-navlist ">
              <div class="detail-navlist-title title-two "><a href="http://wiki.jikexueyuan.com/project/material-design/components/buttons.html" >按钮</a>
                              </div>
                          </li>
                      <li class="detail-navlist ">
              <div class="detail-navlist-title title-two "><a href="http://wiki.jikexueyuan.com/project/material-design/components/buttons-floating-action-button.html" >按钮：浮动操作按钮</a>
                              </div>
                          </li>
                      <li class="detail-navlist ">
              <div class="detail-navlist-title title-two "><a href="http://wiki.jikexueyuan.com/project/material-design/components/cards.html" >卡片</a>
                              </div>
                          </li>
                      <li class="detail-navlist ">
              <div class="detail-navlist-title title-two "><a href="http://wiki.jikexueyuan.com/project/material-design/components/chips.html" >纸片</a>
                              </div>
                          </li>
                      <li class="detail-navlist ">
              <div class="detail-navlist-title title-two "><a href="http://wiki.jikexueyuan.com/project/material-design/components/data-tables.html" >数据表格</a>
                              </div>
                          </li>
                      <li class="detail-navlist ">
              <div class="detail-navlist-title title-two "><a href="http://wiki.jikexueyuan.com/project/material-design/components/dialogs.html" >提示框</a>
                              </div>
                          </li>
                      <li class="detail-navlist ">
              <div class="detail-navlist-title title-two "><a href="http://wiki.jikexueyuan.com/project/material-design/components/dividers.html" >分隔线</a>
                              </div>
                          </li>
                      <li class="detail-navlist ">
              <div class="detail-navlist-title title-two "><a href="http://wiki.jikexueyuan.com/project/material-design/components/grids.html" >网格</a>
                              </div>
                          </li>
                      <li class="detail-navlist ">
              <div class="detail-navlist-title title-two "><a href="http://wiki.jikexueyuan.com/project/material-design/components/lists.html" >列表</a>
                              </div>
                          </li>
                      <li class="detail-navlist ">
              <div class="detail-navlist-title title-two "><a href="http://wiki.jikexueyuan.com/project/material-design/components/list-controls.html" >列表控制</a>
                              </div>
                          </li>
                      <li class="detail-navlist ">
              <div class="detail-navlist-title title-two "><a href="http://wiki.jikexueyuan.com/project/material-design/components/menus.html" >菜单</a>
                              </div>
                          </li>
                      <li class="detail-navlist ">
              <div class="detail-navlist-title title-two "><a href="http://wiki.jikexueyuan.com/project/material-design/components/pickers.html" >选择器</a>
                              </div>
                          </li>
                      <li class="detail-navlist ">
              <div class="detail-navlist-title title-two "><a href="http://wiki.jikexueyuan.com/project/material-design/components/progress-activity.html" >进度和动态</a>
                              </div>
                          </li>
                      <li class="detail-navlist ">
              <div class="detail-navlist-title title-two "><a href="http://wiki.jikexueyuan.com/project/material-design/components/selection-controls.html" >选择控制</a>
                              </div>
                          </li>
                      <li class="detail-navlist ">
              <div class="detail-navlist-title title-two "><a href="http://wiki.jikexueyuan.com/project/material-design/components/sliders.html" >滑块</a>
                              </div>
                          </li>
                      <li class="detail-navlist ">
              <div class="detail-navlist-title title-two "><a href="http://wiki.jikexueyuan.com/project/material-design/components/snackbars-and-toasts.html" >Snackbars 与 Toasts</a>
                              </div>
                          </li>
                      <li class="detail-navlist ">
              <div class="detail-navlist-title title-two "><a href="http://wiki.jikexueyuan.com/project/material-design/components/subheaders.html" >副标题</a>
                              </div>
                          </li>
                      <li class="detail-navlist ">
              <div class="detail-navlist-title title-two "><a href="http://wiki.jikexueyuan.com/project/material-design/components/switches.html" >开关</a>
                              </div>
                          </li>
                      <li class="detail-navlist ">
              <div class="detail-navlist-title title-two "><a href="http://wiki.jikexueyuan.com/project/material-design/components/tabs.html" >Tabs</a>
                              </div>
                          </li>
                      <li class="detail-navlist ">
              <div class="detail-navlist-title title-two "><a href="http://wiki.jikexueyuan.com/project/material-design/components/text-fields.html" >文本框</a>
                              </div>
                          </li>
                      <li class="detail-navlist ">
              <div class="detail-navlist-title title-two "><a href="http://wiki.jikexueyuan.com/project/material-design/components/tooltips.html" >工具提示</a>
                              </div>
                          </li>
                  </ul>
          </li>
      <li class="detail-navlist navlist-one ">
      <div class="detail-navlist-title"><a href="#" >模式</a>
        <div class="navlist-more more-one nav-down "></div>       </div>
              <ul class="navul-one ">
                      <li class="detail-navlist ">
              <div class="detail-navlist-title title-two "><a href="http://wiki.jikexueyuan.com/project/material-design/patterns/app-structure.html" >App 结构</a>
                              </div>
                          </li>
                      <li class="detail-navlist ">
              <div class="detail-navlist-title title-two "><a href="http://wiki.jikexueyuan.com/project/material-design/patterns/data-formats.html" >数据格式</a>
                              </div>
                          </li>
                      <li class="detail-navlist ">
              <div class="detail-navlist-title title-two "><a href="http://wiki.jikexueyuan.com/project/material-design/patterns/empty-states.html" >空状态</a>
                              </div>
                          </li>
                      <li class="detail-navlist ">
              <div class="detail-navlist-title title-two "><a href="http://wiki.jikexueyuan.com/project/material-design/patterns/errors.html" >错误</a>
                              </div>
                          </li>
                      <li class="detail-navlist ">
              <div class="detail-navlist-title title-two "><a href="http://wiki.jikexueyuan.com/project/material-design/patterns/selection.html" >内容选取</a>
                              </div>
                          </li>
                      <li class="detail-navlist ">
              <div class="detail-navlist-title title-two "><a href="http://wiki.jikexueyuan.com/project/material-design/patterns/gestures.html" >手势</a>
                              </div>
                          </li>
                      <li class="detail-navlist ">
              <div class="detail-navlist-title title-two "><a href="http://wiki.jikexueyuan.com/project/material-design/patterns/launch-screens.html" >启动屏幕</a>
                              </div>
                          </li>
                      <li class="detail-navlist ">
              <div class="detail-navlist-title title-two "><a href="http://wiki.jikexueyuan.com/project/material-design/patterns/loading-images.html" >加载图像</a>
                              </div>
                          </li>
                      <li class="detail-navlist ">
              <div class="detail-navlist-title title-two "><a href="http://wiki.jikexueyuan.com/project/material-design/patterns/navigation-drawer.html" >抽屉式导航</a>
                              </div>
                          </li>
                      <li class="detail-navlist ">
              <div class="detail-navlist-title title-two "><a href="http://wiki.jikexueyuan.com/project/material-design/patterns/navigation.html" >导航</a>
                              </div>
                          </li>
                      <li class="detail-navlist ">
              <div class="detail-navlist-title title-two "><a href="http://wiki.jikexueyuan.com/project/material-design/patterns/navigational-transitions.html" >导航过渡</a>
                              </div>
                          </li>
                      <li class="detail-navlist ">
              <div class="detail-navlist-title title-two "><a href="http://wiki.jikexueyuan.com/project/material-design/patterns/scrolling-techniques.html" >滚动技巧</a>
                              </div>
                          </li>
                      <li class="detail-navlist ">
              <div class="detail-navlist-title title-two "><a href="http://wiki.jikexueyuan.com/project/material-design/patterns/promoted-actions.html" >改进的操作</a>
                              </div>
                          </li>
                      <li class="detail-navlist ">
              <div class="detail-navlist-title title-two "><a href="http://wiki.jikexueyuan.com/project/material-design/patterns/settings.html" >设置</a>
                              </div>
                          </li>
                      <li class="detail-navlist ">
              <div class="detail-navlist-title title-two "><a href="http://wiki.jikexueyuan.com/project/material-design/patterns/imagery-treatment.html" >影像处理</a>
                              </div>
                          </li>
                      <li class="detail-navlist ">
              <div class="detail-navlist-title title-two "><a href="http://wiki.jikexueyuan.com/project/material-design/patterns/search.html" >搜索</a>
                              </div>
                          </li>
                      <li class="detail-navlist ">
              <div class="detail-navlist-title title-two "><a href="http://wiki.jikexueyuan.com/project/material-design/patterns/swipe-to-refresh.html" >刷新</a>
                              </div>
                          </li>
                  </ul>
          </li>
      <li class="detail-navlist navlist-one ">
      <div class="detail-navlist-title"><a href="#" >可用性</a>
        <div class="navlist-more more-one nav-down "></div>       </div>
              <ul class="navul-one ">
                      <li class="detail-navlist ">
              <div class="detail-navlist-title title-two "><a href="http://wiki.jikexueyuan.com/project/material-design/usability/accessibility.html" >可达性</a>
                              </div>
                          </li>
                      <li class="detail-navlist ">
              <div class="detail-navlist-title title-two "><a href="http://wiki.jikexueyuan.com/project/material-design/usability/bidirectionality.html" >双向性</a>
                              </div>
                          </li>
                  </ul>
          </li>
      <li class="detail-navlist navlist-one ">
      <div class="detail-navlist-title"><a href="#" >资源</a>
        <div class="navlist-more more-one nav-down "></div>       </div>
              <ul class="navul-one ">
                      <li class="detail-navlist ">
              <div class="detail-navlist-title title-two "><a href="http://wiki.jikexueyuan.com/project/material-design/resources/layout-templates.html" >布局模板</a>
                              </div>
                          </li>
                      <li class="detail-navlist ">
              <div class="detail-navlist-title title-two "><a href="http://wiki.jikexueyuan.com/project/material-design/resources/devices.html" >设备</a>
                              </div>
                          </li>
                      <li class="detail-navlist ">
              <div class="detail-navlist-title title-two "><a href="http://wiki.jikexueyuan.com/project/material-design/resources/sticker-sheets.html" >贴片集</a>
                              </div>
                          </li>
                      <li class="detail-navlist ">
              <div class="detail-navlist-title title-two "><a href="http://wiki.jikexueyuan.com/project/material-design/resources/roboto-font.html" >Roboto 字体</a>
                              </div>
                          </li>
                      <li class="detail-navlist ">
              <div class="detail-navlist-title title-two "><a href="http://wiki.jikexueyuan.com/project/material-design/resources/color-palettes.html" >调色板</a>
                              </div>
                          </li>
                  </ul>
          </li>
      <li class="detail-navlist navlist-one ">
      <div class="detail-navlist-title"><a href="#" >What&rsquo;s New</a>
        <div class="navlist-more more-one nav-down "></div>       </div>
              <ul class="navul-one ">
                      <li class="detail-navlist ">
              <div class="detail-navlist-title title-two "><a href="http://wiki.jikexueyuan.com/project/material-design/whats-new/whats-new.html" >更新记录</a>
                              </div>
                          </li>
                  </ul>
          </li>
      </ul>
    <div class="detail-left-bottom">
      Via 由 [ <a href="http://wiki.jikexueyuan.com" class="detail-navlist-wikilogo" target="_blank">极客学院 Wiki</a> ] 提供
    </div>
  </div>
  <aside class="detail-right">

    <div class="right-author">

        <div class="right-author-jkprint"></div>
          </div>

    <h2 class="right-adtitle">Sponsered by</h2>
    <div class="mg-t10 ad" id="ad-right-1"></div>
    <div class="mg-t10 ad" id="ad-right-2"></div>
    <div class="mg-t10 ad" id="ad-right-3"></div>

 
    <script type="text/javascript" src="http://cbjs.baidu.com/js/m.js"></script>


    <script type="text/javascript">
      BAIDU_CLB_fillSlotAsync('1176465', 'ad-right-1');
      BAIDU_CLB_fillSlotAsync('1176522', 'ad-right-2');
      BAIDU_CLB_fillSlotAsync('1176466', 'ad-right-3');
    </script>

    <h2 class="right-h2">离线下载</h2>
    <div class="right-download">
              <a href="http://passport.jikexueyuan.com/sso/login " target="_blank" class="download-pdf blue-btn">PDF版</a>
        <a href="http://passport.jikexueyuan.com/sso/login " target="_blank" class="download-epub blue-btn">ePub版</a>
      
    </div>

    <h2 class="right-h2">相关资源</h2>
    <ul class="right-resource">
            <li class="resource-item">
        <img src="/assets/wiki2.1/images/iconblog.png"><a href="http://wiki.jikexueyuan.com/project/android-training-geek" target="_blank"> Android官方培训课程</a>
      </li>
            <li class="resource-item">
        <img src="/assets/wiki2.1/images/iconblog.png"><a href="http://wiki.jikexueyuan.com/project/rxjava" target="_blank"> RxJava Essentials 中文翻译版</a>
      </li>
            <li class="resource-item">
        <img src="/assets/wiki2.1/images/iconvideo.png"><a href="http://www.jikexueyuan.com/course/178.html" target="_blank"> JavaScript语法详解</a>
      </li>
            <li class="resource-item">
        <img src="/assets/wiki2.1/images/iconask.png"><a href="http://wenda.jikexueyuan.com/question/25438" target="_blank"> 出现java.lang.UnsatisfiedLinkError错误</a>
      </li>
            <li class="resource-item">
        <img src="/assets/wiki2.1/images/icondown.png"><a href="http://download.jikexueyuan.com/detail/id/477" target="_blank"> Android开发图书：《Android编程实战》</a>
      </li>
            <li class="resource-item">
        <img src="/assets/wiki2.1/images/icongroup.png"><a href="http://qun.jikexueyuan.com/android/topic/157" target="_blank"> #干货分享#Android Service深入解析</a>
      </li>
          </ul>
 

  </aside>
  <div class="detail-main">
    <div class="markdown-body"><h1>响应式交互</h1>
<p>响应式交互能让用户信任，并且吸引他们。 当用户操作一个美观且符合常理的应用时，他们会感到满意甚至很高兴。那是一种经过深思熟虑、有目的、非随机的而且可以带有轻微异想天开但不会让人分心的交互。</p>
<p>在 material design 中，应用是响应式的并且渴望用户操作的：</p>
<ul>
<li>触摸，语音，键盘及鼠标作为首要考虑的输入方式。</li>
<li>虽然 UI 元素是有形的，但是他们被限制在屏幕里面（电脑或者移动设备的屏幕），视觉元素和动效能减少这种割裂，让用户能够立即感知自己的操作。</li>
</ul>
<p>响应式交互把一个应用从简单展现用户所请求的信息，提升至能与用户产生更强烈、更具体化交互的工具。</p>
<p>表层响应</p>
<video src="http://materialdesign.qiniudn.com/videos/animation-responsiveinteraction-inkreactions-notouchripplepressandrelease_large_xhdpi.mp4" controls="controls" width="740" loop height="350"></video>
<p>元素响应</p>
<video src="http://materialdesign.qiniudn.com/videos/animation-responsive-interation-radialReact-example_large_xhdpi.mp4" controls="controls" width="740" loop height="350"></video>
<p>径向响应</p>
<h2 id="1c347dbf07c9afea2837284c9a844a5e">表层响应</h2>
<p>接收到输入事件，如点击屏幕，系统会立即在交互的触点上绘制出一个可视化的图形让用户感知到：如在点击屏幕时、使用麦克风时，或者键盘输入时，会出现类似于墨水扩散那样的视觉效果形状。</p>
<p>触控涟漪是这种触摸效果的核心视觉机制。在进行触摸事件时，设备能清晰而及时地让用户感知触摸按钮和语音输入时的变化。</p>
<h3>最佳范例</h3>
<p>在输入事件对应的位置上，例如：在手指的点击位置或者讲话的时候，屏幕上麦克风的图标位置会出现一个扩散的视觉元素。</p>
<video crossorigin="anonymous" loop controls width="740" height="350"><source src="http://materialdesign.qiniudn.com/videos/animation-responsiveinteraction-surfacereaction-030202_TouchRipple_PressRelease_xhdpi_002.mp4"></source></video>
<p>触控涟漪-点击/释放</p>
<video crossorigin="anonymous" loop controls width="740" height="350"><source src="http://materialdesign.qiniudn.com/videos/animation-responsiveinteraction-surfacereaction-030202_TouchRipple_DragRelease_xhdpi_002.mp4"></source></video>
<p>触控涟漪-拖进/拖出</p>
<h2 id="53e02bbac21e17e1bbf11d12c46c807a">元素响应</h2>
<p>和表层响应的触控涟漪一样，每个元素本身也能做出交互响应，物体可以在触控或点击的时候浮起来，以表示该元素正处于激活状态。用户可以通过点击、拖动来生成、改变元素或者直接对元素进行处理。</p>
<h2 id="a37cdd2c8c982685c71353663b30e7c0">最佳范例</h2>
<h3>以触控点为原点展开新元素的动画</h3>
<p>当用户操作生成一个新元素时，元素的动画应该基于触控点展开。</p>
<video crossorigin="anonymous" loop controls width="740" height="350"><source src="http://materialdesign.qiniudn.com/videos/animation-responsiveinteraction-materialresponse-PointOfOrigin_DO_003.mp4"></source></video>
<p> <font color="green">(上图)可取</font></p>
<p>元素从触控点展开时，通过视觉效果将元素与触控点联系起来。</p>
<video crossorigin="anonymous" loop controls width="740" height="350"><source src="http://materialdesign.qiniudn.com/videos/animation-responsiveinteraction-materialresponse-PointOfOrigin_DONT_003.mp4"></source></video>
<p> <font color="red">(上图)不可取</font></p>
<p>卡片元素从屏幕正中央出现，用户无法把触控点与卡片元素联系起来。</p>
<h3>点击浮动</h3>
<p>当卡片元素或可分离元素被激活时，应该浮起以表明正处于激活状态。</p>
<video crossorigin="anonymous" loop controls width="740" height="350"><source src="http://materialdesign.qiniudn.com/videos/animation-responsiveinteraction-materialresponce_liftontouch_xhdpi_002.mp4"></source></video>
<p>点击浮动</p>
<h2 id="72e7a0ac8d41461cc9d0ad47878a2353">径向响应</h2>
<p>所有的用户交互行为中都会有一个中心点，他们想通过该中心点来达到自己的目的。</p>
<p>作为用户关注的中心点，应该绘制一个明显的视觉效果来让用户清晰地感知自己的输入（触摸屏幕、语音输入等）。在用户的操作中心点应该形成一个像涟漪一样逐渐发散开的径向动效响应。</p>
<p>所有输入都有中心点，涟漪效果应从触控点、语音时屏幕上的语音图标、键盘输入时具体的按键点击位置上展开。</p>
<p>这些输入动作产生时都应该在中心点形成一个视觉上的关联，从中心点展开一连串动作产生的涟漪效果。</p>
<blockquote>
<p>原文：<a rel="nofollow" href="http://www.google.com/design/spec/animation/responsive-interaction.html"">Responsive Interaction</a> 翻译：<a rel="nofollow" href="https://github.com/7heaven"">7heaven</a> 校对：<a rel="nofollow" href="https://github.com/KongZhen"">KongZhen</a>
I</p>
</blockquote></div>

    
    <div class="previous-and-next">
              <span class="pull-left">上一篇: <a id="previous_link" href="/project/material-design/animation/authentic-motion.html" data-toggle="tooltip" data-placement="top" title="上翻页快捷键：左方向键">真实的动作</a></span>
      
              <span class="pull-right">下一篇: <a id="next_link" href="/project/material-design/animation/meaningful-transitions.html" data-toggle="tooltip" data-placement="top" title="下翻页快捷键：右方向键">有意义的转场动画</a></span>
          </div>

    <div class="detail-share clearfix">
      <div class="bdsharebuttonbox share-item">
        <a href="#" class="bds_more" data-cmd="more"></a>
        <a href="#" class="bds_weixin" data-cmd="weixin" title="分享到微信"></a>
        <a href="#" class="bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a>
        <a href="#" class="bds_qzone" data-cmd="qzone" title="分享到QQ空间"></a>
        <a href="#" class="bds_youdao" data-cmd="youdao" title="分享到有道云笔记"></a>
      </div>
      <script>
        window._bd_share_config = {
          "common": {
            "bdSnsKey": {},
            "bdText": "",
            "bdMini": "2",
            "bdMiniList": false,
            "bdPic": "",
            "bdStyle": "0",
            "bdSize": "16"
          },
          "share": {},
          "image": {
            "viewList": ["weixin", "tsina", "qzone", "youdao"],
            "viewText": "分享到：",
            "viewSize": "16"
          }
        };
        with(document) 0[(getElementsByTagName('head')[0] || body).appendChild(createElement('script')).src = 'http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion=' + ~(-new Date() / 36e5)];
      </script>
    </div>
          <div id="jkcomments"></div>
          <div class="wiki-right">
      <div class="backtotop">
        <a href="javascript:;" class="btn-backtotop" style="display: none;">
          <div class="arrow"></div>
          <div class="stick"></div>
        </a>
      </div>
    </div>
  </div>

</div>
<script type="text/javascript" src="http://sp1.jikexueyuan.com/static/scripts/jquery.min.js"></script>
<script type="text/javascript" src="/assets/wiki2.1/js/detail.js"></script>
<script type="text/javascript" src="/assets/wiki2.1/js/bootstrap.min.js"></script>
<script type="text/javascript" src="http://sp1.jikexueyuan.com/static/scripts/LoginAndRegister.js"></script>


  <script>
    var JKcomments = {
      perPage: 15,
      model: "wiki", //模块名称（必填）
      parent_id: "material-design",
      item_id: "d7c57c50e60651caf67022b197a43677" //被评论信息ID（必填）
    }
  </script>
  <script type="text/javascript" src="http://sw1.jikexueyuan.com/home/js/comments.min.js"></script>
  
<script type="text/javascript">
    $(function(){
        $('[data-toggle="tooltip"]').tooltip();
    });
    var _Sjkxy     = _Sjkxy || [];
    _Sjkxy['params']    = {wikiP:'Material Design 中文版' , posId:117001, po:69001 , wPId : '422'};
</script>

<script>
(function(i, s, o, g, r, a, m) {
    i['GoogleAnalyticsObject'] = r;
    i[r] = i[r] || function() {
        (i[r].q = i[r].q || []).push(arguments)
    }, i[r].l = 1 * new Date();
    a = s.createElement(o),
        m = s.getElementsByTagName(o)[0];
    a.async = 1;
    a.src = g;
    m.parentNode.insertBefore(a, m)
})(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');

ga('create', 'UA-45975042-2', 'auto');
ga('send', 'pageview');
</script>
<script type="text/javascript" src='http://e.jikexueyuan.com/static/js/growingio.js'></script>
</body>

</html>
 -->



